<template>
  <view :style="{backgroundColor:backgroundColor}" class="tui-keyboard-input tui-pwd-box">
    <view class="tui-inner-box">
      <view v-for="(item,index) in inputvalue" :key="index"
            :class="[inputvalue.length===4?'tui-margin-right':'']"
            :style="{fontSize:size+'rpx',color:color,width:(inputvalue.length===4?90:70)+'rpx' }" class="tui-input">
        {{ item }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "tuiKeyboardInput",
  props: {
    //背景颜色
    backgroundColor: {
      type: String,
      default: "#fff"
    },
    size: {
      type: Number,
      default: 32
    },
    color: {
      type: String,
      default: "#333"
    },
    //输入框的值：数组格式，长度即为输入框个数
    inputvalue: {
      type: Array,
      default: ["", "", "", "", "", ""] //密码圆点 ●
    }
  },
  data() {
    return {};
  }
}
</script>

<style scoped>
.tui-pwd-box {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  vertical-align: top;
}

.tui-inner-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tui-input {
  height: 80rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  border-bottom: 2px solid #666;
}

.tui-margin-right {
  margin-right: 30rpx;
}

.tui-input:last-child {
  margin-right: 0 !important;
}
</style>
